<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="600px" :before-close="handleCancel">
      <el-form ref="handleFormRef" :model="handleForm" label-width="100px" :rules="rules" size="small">
        <el-form-item label="工单编号">
          <el-input v-model="handleForm.rwoNumber" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="报修人">
          <el-input v-model="handleForm.createName" auto-complete="off" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="handleForm.createDept" auto-complete="off" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="报修类型">
          <el-input v-model="handleForm.repairTypeName" auto-complete="off" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="紧急程度">
          <el-rate v-model="handleForm.urgency" :disabled="disabled"> </el-rate>
        </el-form-item>
        <el-form-item label="报修内容" prop="repairContent">
          <el-input
            type="textarea"
            v-model="handleForm.repairContent"
            auto-complete="off"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="照片">
          <viewer :images="handleForm.repairPicUrl">
            <img v-for="src in handleForm.repairPicUrl" :key="src" :src="src" class="img-over" />
          </viewer>
        </el-form-item>
        <el-form-item label="上报时间">
          <el-input v-model="handleForm.createTime" auto-complete="off" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="statusName" auto-complete="off" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="满意度">
          <el-rate v-model="handleForm.satisfaction" :disabled="disabled"> </el-rate>
        </el-form-item>
        <el-form-item label="评价">
          <el-input
            type="textarea"
            rows="4"
            v-model="handleForm.appraise"
            auto-complete="off"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="资产编号">
          <el-input v-model="handleForm.assetNo" auto-complete="off" :disabled="disabled"></el-input>
        </el-form-item>
        <!-- <el-form-item label="选择维修人" prop="staff" ref="staff">
          <el-row type="flex" justify="space-between">
            <el-col :span="20" style="margin-right:10px"
              ><el-input v-model="handleForm.staff" auto-complete="off" placeholder="请选择维修人" disabled></el-input
            ></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="短信通知" prop="noticeType">
          <el-radio-group v-model="handleForm.noticeType">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import pick from 'lodash.pick'
import { WorkOrderStatusData } from '../js/constants'
// import { dispatchWorkOrder } from '@/api/repair'
export default {
  props: {},
  components: {},
  data () {
    return {
      title: '工单处理',
      visible: false,
      disabled: true,
      isDetail: false,
      tenantNo: Vue.ls.get(USER_INFO).tenantNo,
      model: {},
      personnelData: {},
      handleForm: {
        createName: '',
        createDept: '',
        repairType: '',
        repairTypeName: '',
        urgency: '',
        repairContent: '',
        repairPicUrl: [],
        staff: '',
        noticeType: ''
      },
      maintainer: [],
      rules: {
        staff: [{ required: true, message: '维修人不能为空', trigger: 'blur' }]
      },
      statusName: ''
    }
  },
  computed: {},
  created () {},
  mounted () {},
  watch: {
    'handleForm.staff' (val) {
      if (val.length > 0) {
        this.$refs['staff'].clearValidate()
      }
    }
  },
  methods: {
    // 新增
    add () {
      this.edit({})
    },
    // 编辑
    edit (record) {
      this.visible = true
      this.model = Object.assign({}, record)
      console.log(record)
      this.$nextTick(() => {
        this.handleForm = Object.assign(
          this.handleForm,
          pick(
            this.model,
            'rwoNumber',
            'createName',
            'createDept',
            'repairTypeName',
            'repairPicUrl',
            'urgency',
            'repairContent',
            'appraise',
            'satisfaction',
            'createTime',
            'noticeType',
            'assetNo'
          )
        )
        this.handleForm.staff = ''
        WorkOrderStatusData.map(obj => {
          if (obj.value === this.model.status) {
            this.statusName = obj.label
          }
        })
      })
      console.log(record)
    },
    handleCancel () {
      this.visible = false
    },
    personnelModalFormOk (data) {
      this.personnelData = data
      this.handleForm.staff = data.userName
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog {
  margin-top: 5vh !important;
}
/deep/ .el-dialog__body {
  padding: 20px 30px;
}
/deep/ .img-over {
  margin-right: 5px;
  width: 60px;
  height: 45px;
  cursor: pointer;
}
/deep/ .viewer-container {
  z-index: 3000;
}
/deep/ .el-rate {
  padding-top: 6px;
}
</style>
